import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';

const useStyles = makeStyles(theme => ({
  textWhite: {
    color: 'white',
    textTransform: 'uppercase',
  },
}));

const MadCap = props => {
  const { className, ...rest } = props;
  const classes = useStyles();

  return (
    <div className={className} {...rest}>
      <SectionHeader
        title={<span className={classes.textWhite}>Crowded For Artists</span>}
        titleVariant="h1"
        subtitle={<span className={classes.textWhite}>Crowded accepts all forms of media. Music audio, audio books, audio dramas, podcasts, video and more! What are the benefits of adding my projects to Crowded? Free promotion, artists get paid for streams, independent artists are the stars on Crowded, and much more! Each artist will get their own artist portal that shows their stats, their top cities, the exact amount of revenue they have made so far and much more!</span>}
        ctaGroup={[
          <Button variant="outlined" color="secondary" size="large">
            Join Now!
          </Button>,
        ]}
        disableGutter
        data-aos="fade-up"
      />
    </div>
  );
};

MadCap.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default MadCap;
